<template>
  <div id="orderManagement">
    <!--  支付类型选择 -->
    <div class='mc1' v-show='isdocType' @click.stop='isdocType=false'>
      <div class='duration' @click.stop='isdocType=true'>
        <div class='top'>
          <a @click.stop='isdocType=false'>取消</a>
          <a @click.stop='sureDocType'>确定</a>
        </div>
        <mt-picker :slots="slotsDocType" @change="onValuesChangeDocType"></mt-picker>
      </div>
    </div>
    <header>
      <i @click="goBack()"></i>
      <div>订单管理</div>
    </header>
    <div class="nav">
      <div class="active" @click='tabToggle(0,sentPage,"click")'>
        <a class="">
          <b>全部</b>
        </a>
      </div>
      <div @click='tabToggle(1,sentPage,"click")'>
        <a class="">
          <b>待付款</b>
        </a>
      </div>
      <div @click='tabToggle(2,sentPage,"click")'>
        <a class="">
          <b>待发货</b>
        </a>
      </div>
      <div @click='tabToggle(3,sentPage,"click")'>
        <a class="">
          <b>待收货</b>
        </a>
      </div>
    </div>
    <div class="swipe">
      <div class='mc' v-if="list.length<1">
        <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
        <p>您还没有相关的订单</p>
      </div>
      <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
        <ul class="list">
          <li v-for="(item,index) in list" :key='index'>
            <a>
              <i style='float: left'>{{item.pay_time?item.pay_time:item.time}}</i>
              <i>{{item.status=="unpay"?"等待买家付款":"交易成功"}}</i>
              <div class="goodsInfo" v-for="(gid,gindex) in JSON.parse(item.gids)">
                <img :src="gid.img_url" />
                <div>
                  <div>
                    <h3>{{gid.name}}</h3>
                    <div class="price">
                      ￥{{item.cost_price}}.00
                    </div>
                  </div>
                </div>
              </div>
              <div style="border-bottom: 1px solid #f6f6f6;padding: 10px 0px">需求：{{item.need==''?'无':item.need}}</div>

              <div class="btns">
                <div class="goodsPrice">
                  共{{item.goodsnum}}件商品总计：￥{{item.cash_fee}}.00
                </div>
                <span v-if='item.status=="unpay"' class="active" @click='goPay(item)'>付款</span>
              </div>

            </a>
          </li>
        </ul>
      </Loadmore>
    </div>
  </div>
</template>
<script>
  import {
    Loadmore,
    MessageBox
  } from 'mint-ui';
  export default {
    data() {
      return {
        isdocType: false, //是否显示就诊类型选择
        order_num: '',
        total_price: '',
        slotsDocType: [{
          values: ['微信', '支付宝'],
          className: 'slot1',
          textAlign: 'center'
        }, ],

        list: [],
        userid: '',
        isShow: true,
        type: '全部',
        sentPage: {
          page: 1,
          rows: "10"
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕
      }
    },
    filters: {

    },
    components: {
      Loadmore,
    },
    methods: {
      goBack() {

        this.$router.push({
          path: '/my'
        })
        // this.$router.go(-1)
      },
      // 登录拦截
      isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push('/login1')
          return false;
        } else {
          return true;
        }
      },

      onValuesChangeDocType(picker, values) {
        this.valuesDocType = values[0];
      },
      sureDocType() {
        if (this.valuesDocType == '微信') {
          this.isdocType = false;
          const data = {
            order_num: this.order_num,
            total_fee: this.total_price,
            des: '团购订单'
          };
          this.$api.post(this.$api.baseURL2, "/android_wxpay", data, r => {
            var params = {
              partnerid: r.data.mch_id, // merchant id 
              prepayid: r.data.prepay_id, // prepay id 
              noncestr: r.data.nonce_str, // nonce 
              timestamp: r.data.timestamp, // timestamp 
              sign: r.data.sign, // signed string 
            };
            Wechat.sendPaymentRequest(params, function () {
              this.$utils._toast('支付成功');
            }, function (reason) {
              this.$utils._toast(reason);
            });
          }, err => {
            console.log(err);
          }, false, false)

        } else if (this.valuesDocType == '支付宝') {
          //   支付宝支付
          this.isdocType = false;
          const data = {
            order_num: this.order_num,
            subject: '团购订单',
            amount: this.total_price
          };
          this.$api.post(this.$api.baseURL2, "/alipay_app", data, r => {
            var params = r.data.data;
            cordova.plugins.alipay.payment(params, function () {
              this.$utils._toast('支付成功');
            }, function (reason) {
              this.$utils._toast(reason);
            });
          }, err => {
            console.log(err);
          }, false, false)
        }
      },
      goPay(item) {
        this.isdocType = true //是否显示就诊类型选择
        this.order_num = item.order_num
        this.total_price = item.cash_fee
      },
      // 支付宝退款
      refund_alipay(item) {
        const data = {
          order_num: item.order_num
        };
        this.$api.post(this.$api.baseURL2, "refund_alipay", data, r => {
          console.log(r);
          if (r.data.ret == 1) {
            var fund_change = r.data.fund_change;
            if (fund_change == 'Y') {
              this.$utils._toast("退款成功，资金有变动");
            } else if (fund_change == 'N') {
              this.$utils._toast("该订单已经退款成功，资金没有变动！！！");
            }
          } else if (r.data.ret == -2) {
            this.$utils._toast("先支付再退款");
          }
        }, err => {
          console.log(err);
        }, false, false)

      },
      //获取对应状态的订单列表
      tabToggle(i, params, click) { //0全部 1代付款 2代发货 3待收货
        $('.nav div').eq(i).addClass('active').siblings().removeClass();
        //每点击一次初始化
        if (click) {
          this.list = [];
          this.sentPage.page = 1;
        }
        this.userid = localStorage.getItem("loginMobile");
        if (i == 0) {
          this.type = '全部';
          this.$api.post(this.$api.baseURLSchool, "selecttype_view/order1/0?uid=" + this.userid, params, r => {
            console.log(r);
            this.totalNum = r.data.records;
            if (this.sentPage.page == 1) {
              this.list = r.data.rows;
            } else {
              this.list = this.list.concat(r.data.rows);
            }
            if (r.data.rows.length == 0 && this.sentPage.page > 1) {
              this.$utils._toast("暂无更多数据");
            }
            if (r.data.ret == -3) {
              localStorage.clear();
              this.isLogin()
            }

          }, err => {
            console.log(err);
          })
        }
        if (i == 1) {
          this.type = '待付款';
          this.$api.post(this.$api.baseURLSchool, "selecttype_view/order1/0?uid=" + this.userid + "&status=unpay",
            params, r => {
              this.totalNum = r.data.records;
              if (this.sentPage.page == 1) {
                this.list = r.data.rows;
              } else {
                this.list = this.list.concat(r.data.rows);
              }
              if (r.data.ret == -3) {
                localStorage.clear();
                this.isLogin()
              }
              if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                this.$utils._toast("暂无更多数据");
              }
            }, err => {
              console.log(err);
            })
        }
        if (i == 2) {
          this.type = '待发货',
            this.$api.post(this.$api.baseURLSchool, "selecttype_view/order1/0?uid=" + this.userid + "&status=pay",
              params, r => {
                this.totalNum = r.data.records;
                if (this.sentPage.page == 1) {
                  this.list = r.data.rows;
                } else {
                  this.list = this.list.concat(r.data.rows);
                }
                if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                  this.$utils._toast("暂无更多数据");
                }
                if (r.data.ret == -3) {
                  localStorage.clear();
                  this.isLogin()
                }
              }, err => {
                console.log(err);
              })
        }
        if (i == 3) {
          this.type = '待收货',
            this.$api.post(this.$api.baseURLSchool, "selecttype_view/order1/0?uid=" + this.userid + "&status=delivered",
              params, r => {
                console.log(r);
                this.totalNum = r.data.records;
                if (this.sentPage.page == 1) {
                  this.list = r.data.rows;
                } else {
                  this.list = this.list.concat(r.data.rows);
                }
                if (r.data.ret == -3) {
                  localStorage.clear();
                  this.isLogin()
                }
                if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                  this.$utils._toast("暂无更多数据");
                }
              }, err => {
                console.log(err);
              })
        }
      },
      //上拉加载下一页
      loadBottom() {
        (this.sentPage.page) ++;
        if (this.type == '全部') {
          setTimeout(() => {
            this.tabToggle(0, this.sentPage);
          }, 20);
        } else if (this.type == "待付款") {
          setTimeout(() => {
            this.tabToggle(1, this.sentPage);
          }, 20);
        }
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
      //删除订单
      delOrder(cid) {
        MessageBox.confirm('确定删除该订单?').then(action => {
          const params = {
            id: cid
          }
          this.$api.post(this.$api.baseURLSchool, "update_order/del", params, r => {
            console.log(r);
            if (r.data.ret == 1) {
              //删除成功 更新列表
              this.sentPage.page = 1;
              if (this.type == '全部') {
                setTimeout(() => {
                  this.tabToggle(0, this.sentPage);
                }, 20);
              } else if (this.type = "待付款") {
                setTimeout(() => {
                  this.tabToggle(1, this.sentPage);
                }, 20);
              }
            }
          }, err => {
            console.log(err);
          })

        }, r => {

        });
      },

    },
    created() {
      this.tabToggle(0, this.sentPage);
    },
    mounted() {

    }
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);

    img {
      display: block;
      margin: 0 auto;
    }

    p {
      padding-top: 10px;
      text-align: center;
    }
  }

  .mc1 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 99;

    .duration {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 235px;
      background: #fff;

      div.top {
        display: flex;
        height: 45px;
        line-height: 45px;
        background: linear-gradient(to bottom, #7ad8ad, #67b296);
        padding: 0 25px;

        a {
          flex: 1;
          font-size: 17px;
          color: #fff;

          &:last-child {
            text-align: right;
          }
        }
      }
    }
  }

</style>
